<template>
  <view class="search-page flex-column">
    <BaseNavBar></BaseNavBar>
    <view
      class="search flex-column-center pl-22"
      :style="{
        marginTop: capsuleInfo?.top - safeAreaInsets?.top + 'px',
        width: capsuleInfo?.left - 50 + 'px',
      }"
    >
      <wd-icon name="chevron-left" size="22px" @click="backTo"></wd-icon>
      <wd-input
        ref="inputRef"
        v-model="searchValue"
        placeholder="请输入菜名"
        use-suffix-slot
        focus
        @input="inputSearch"
        @focus="inputFocus"
      >
        <template #suffix>
          <view style="position: relative">
            <wd-button size="small" plain @click="search">搜索</wd-button>
          </view>
        </template>
      </wd-input>
    </view>

    <!-- 搜索框有值且点击了搜索按钮之后 -->
    <view class="show-res" v-if="searchValue && searchFlag">
      <view class="search-res" v-if="resList && resList.length !== 0">
        <DishItem
          v-for="item of resList"
          :key="item.name"
          :item-info="item"
          class="flex-column-center mt-16"
          style="
            border: 1px dashed #ffe1df;
            padding: 32rpx;
            box-sizing: border-box;
          "
        >
          <template #rightSlot>
            <wd-button size="small" hairline plain @click="joinMenu(item)">
              {{
                orderDishList.find((order) => order.name === item.name)
                  ? "移出菜单"
                  : "加入菜单"
              }}
            </wd-button>
          </template>
        </DishItem>
      </view>
      <view class="no-more mt-32" v-else>
        <wd-status-tip
          image="https://registry.npmmirror.com/wot-design-uni-assets/*/files/search.png"
          tip="当前搜索无结果"
        />
        <view class="text-wrap mt-32 flex-column">
          <view class="text">没有搜到想吃的菜品嘛?</view>
          <view class="add-dish mt-8"
            >在下面填写你想吃的菜名, 或者直接复制一条链接</view
          >
        </view>
        <wd-input v-model="newDishValue" placeholder="请输入菜名" />
        <wd-picker
          :columns="columns"
          label="单列选项"
          v-model="value"
          @confirm="handleConfirm"
        />
        <view class="submit flex">
          <wd-button @click="submit">提交</wd-button>
          <wd-button type="success" @click="submitJoin"
            >提交并加入菜单</wd-button
          >
        </view>
      </view>
    </view>

    <view class="text-res" v-else-if="searchValue && !searchFlag">
      <view class="textList">
        <view
          class="text-item flex"
          v-for="item of textList"
          :key="item"
          @click="chooseItem(item)"
        >
          <wd-icon name="search" size="16px"></wd-icon>
          <view class="name">{{ item }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";

import DishItem from "./dishItem.vue";
import { useDishList } from "../../store/dishList";
import { debounce } from "../../utils/common";
import { getMenuList } from "../../api/menu";

const { safeAreaInsets } = uni.getSystemInfoSync();
let capsuleInfo = uni.getMenuButtonBoundingClientRect();

const inputRef = ref(null);
onMounted(() => {
  console.log(inputRef.value);
});
const backTo = () => {
  uni.navigateBack();
};

const inputSearch = debounce(
  function ({ value }) {
    getMenuList({
      name: value,
    }).then((res) => {
      if (res.code === 0) {
        resList.value = res.data;
      }
    });
  },
  500,
  false
);
const inputFocus = () => {
  console.log(11);
  searchFlag.value = false;
};
let searchFlag = ref(false);
const search = () => {
  getMenuList({
    name: searchValue.value,
  }).then((res) => {
    if (res.code === 0) {
      resList.value = res.data;
      searchFlag.value = true;
    }
  });
};
const searchValue = ref(null);
const resList = ref([]);

// 加入菜单项
let dishItem = useDishList();
// 菜单里已经加入的菜
const orderDishList = computed(() => dishItem.list);
const joinMenu = (item) => {
  let index = dishItem.list.findIndex((dish) => dish.name === item.name);
  if (index !== -1) {
    dishItem.removeItem(index);
  } else {
    dishItem.addItem({
      ...item,
    });
  }
};

const textList = computed(() => resList.value.map((item) => item.name));

function chooseItem(item) {
  searchValue.value = item;
  search();
}

const newDishValue = ref(null);
const submit = () => {};
const submitJoin = () => {
  dishItem.addItem({
    name: newDishValue.value,
    monthTime: 0,
    totalTime: 0,
    rank: null,
    url: "",
  });
};
</script>

<style scoped lang="scss">
.search-page {
  height: 100%;

  .show-res {
    flex: 1;
    background-color: $uni-bg-color-grey;

    .search-res {
      margin-top: 32rpx;
      background-color: #fff;
      padding: 32rpx;
    }
  }

  .text-res {
    background-color: $uni-bg-color-grey;
    padding: 32rpx 36rpx 0;
    flex: 1;

    .text-item {
      margin-top: 32rpx;
      font-size: 36rpx;
      align-items: baseline;

      .name {
        margin-left: 18rpx;
      }

      &:first-child {
        margin-top: 0;
      }
    }
  }

  .no-more {
    padding: 36rpx;
    letter-spacing: 1px;
    background-color: #fff;

    .text-wrap {
      align-items: center;
    }

    :deep(.wd-input) {
      margin-top: 16rpx;
    }

    .submit {
      margin-top: 16rpx;
      justify-content: space-between;
    }
  }
}
</style>
